<template>
  <div>
    <h3 style="margin-bottom: 12px;">样式编辑</h3>

    <div v-if="selected">
      <!-- 宽度 -->
      <div class="form-item">
        <label>宽度 (px)</label>
        <t-input-number
          v-model="selected.style.width"
          :min="0"
          :max="9999"
          theme="column"
        />
      </div>

      <!-- 高度 -->
      <div class="form-item">
        <label>高度 (px)</label>
        <t-input-number
          v-model="selected.style.height"
          :min="0"
          :max="9999"
          theme="column"
        />
      </div>

      <!-- 字体大小（可选）-->
      <div class="form-item" v-if="selected.style.fontSize !== undefined">
        <label>字体大小 (px)</label>
        <t-input-number
          v-model="selected.style.fontSize"
          :min="14"
          :max="200"
          theme="column"
        />
      </div>

      <!-- 背景颜色 -->
      <div class="form-item">
        <label>背景色</label>
        <t-input
          v-model="selected.style.backgroundColor"
          placeholder="请输入颜色值，如 #ffffff"
        />
      </div>
    </div>

    <div v-else>未选中任何组件</div>
  </div>
</template>

<script setup>
const props = defineProps({
  selected: Object,
})
</script>

<style scoped>
.form-item {
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
</style>
